<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/admin-header::header">
    <title>项目详情</title>
</head>

<body class="app sidebar-mini rtl">
<div th:replace="common/admin-sadbar::sadbar"></div>

<!-- add Modal -->
<div th:replace="common/modal/project-modal::project_add_modal"></div>
<div th:replace="common/modal/project-modal::project_update_modal"></div>

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> 项目</h1>
            <p>项目详情</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">项目面板</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-star fa-3x"></i>
                <div class="info">
                    <h4>项目总数</h4>
                    <p><b>5</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small info coloured-icon"><i class="icon fa fa-android fa-3x"></i>
                <div class="info">
                    <h4>活跃项目</h4>
                    <p><b>321</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small warning coloured-icon"><i class="icon fa fa-files-o fa-3x"></i>
                <div class="info">
                    <h4>接口数量</h4>
                    <p><b>10</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small danger coloured-icon"><i class="icon fa fa-user-circle fa-3x"></i>
                <div class="info">
                    <h4>项目人员</h4>
                    <p><b>500</b></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="tile">
                <h3 class="tile-title">项目走势</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <canvas class="embed-responsive-item" id="lineChartDemo"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="tile">
                <h3 class="tile-title">项目比例</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <canvas class="embed-responsive-item" id="pieChartDemo"></canvas>
                </div>
            </div>
        </div>
    </div>


    <div class="row">

        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">

                    <h3>项目列表</h3>

                    <div class="offset-md-10">
                        <button class="btn btn-primary" data-toggle="modal"
                                data-target="#project_add_modal">新增项目
                        </button>
                        <button class="btn btn-warning" data-toggle="modal"
                                data-target="#">移交项目
                        </button>
                    </div>

                    <hr>
                    <table class="table table-hover table-bordered" style="white-space: nowrap" id="sampleTable">
                        <thead>
                        <tr>
                            <th th:class="text-center">项目名称</th>
                            <th th:class="text-center">项目描述</th>
                            <th th:class="text-center">创建人</th>
                            <th th:class="text-center">状态</th>
                            <th th:class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="project:${projects}">
                            <td th:class="text-center"><a>[[${project.getProjectName()}]]</a></td>
                            <td th:text="${project.getDescription()}" th:class="text-center">project name</td>
                            <td th:text="${project.getUser().getEmail()}" th:class="text-center">creator</td>
                            <td th:text="${project.getStatus()}" th:class="text-center">status</td>

                            <td th:class="text-center">
                                <button class="btn btn-sm btn-info"
                                        th:onclick="setUpdateModalValue([[${project.getProjectName()}]])"
                                        data-toggle="modal" data-target="#project_update_modal">修改
                                </button>
                                <button class="btn btn-sm btn-danger"
                                        th:onclick="deleteProjectBtnClicked([[${project.getProjectId()}]])">删除项目
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<div th:include="common/script::script"></div>

<script type="text/javascript">$('#sampleTable').DataTable();</script>

<!--<script th:replace="common/js::showChart" type="text/javascript"></script>-->
<script th:src="@{/static/flytest-js/common.js}"></script>
<!--<script th:replace="common/js::addProjectBtnClicked"></script>-->
<script th:src="@{/static/flytest-js/project.js}"></script>
<!--<script th:replace="common/js::updateProjectBtnClicked"></script>-->

</body>
</html>